<script setup lang="ts">
import { computed, ref } from 'vue'
defineOptions({
    name: 'ConsultMore'
})
// 接收父组件提交过来的数据
const props = defineProps<{
    // 控制是否可以点击查看处方 如果使用的这个组件的时候 有处方ID就可以点击查看处方，如果没有 查看处方的就需要设置为禁用效果
    disabled: boolean
}>()

const showPopover = ref(false)
// 通过 actions 属性来定义菜单选项
const actions = computed(() => [
    { text: '查看处方', disabled: props.disabled },
    { text: '删除订单' }
])

const emit = defineEmits<{
    'on-show': []
    'on-delete': []
}>()

const onSelect = (action: { text: string }, index: number) => {
    // 查看处方
    // console.log('查看处方')
    // 需要将事件暴露给父组件 让父组件去显示处方
    if (index === 0) emit('on-show')
    // 删除订单
    if (index === 1) emit('on-delete')
}
</script>

<template>
    <div class="consult-more">
        <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="top-start">
            <template #reference> 更多 </template>
        </van-popover>
    </div>
</template>

<style lang="scss" scoped>
.consult-more {
    color: var(--cp-tag);
    flex: 1;
    font-size: 13px;
}
</style>